<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js定时器钟表</title>
    <style>
        body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select { margin:0; padding:0; }
        em { font-style:normal; }
        li { list-style:none; }
        #list li{ overflow: hidden; position: relative; float: left; width: 138px; height: 172px; border: 2px solid greenyellow; font-size: 50px; line-height: 172px; text-align: center; color: aquamarine;}
        #list li img{  width: 138px; height: 172px; position: absolute; }
        #list li img:nth-of-type(1){top:12px; left: 0px;}
        #list li img:nth-of-type(2){top:172px; left: 0px;}
    </style>
    <script>
        window.onload=function(){
            var oImg0=document.getElementsByTagName("img");
            var timer=null;
            autoPlay();
            function autoPlay(){
                clearInterval(timer);
                var date =new Date();
                var temp= getTwoNum(date.getHours())+getTwoNum(date.getMinutes())+getTwoNum(date.getSeconds());
                var arr=temp.split("");
                for(var i=0;i<arr.length;i++){
                    oImg0[i*2].index=arr[i];
                    oImg0[i*2].src="img/date/"+arr[i]+".jpg";
                }
                timer=setInterval(function(){
                    var date0 =new Date();
                    var temp0= getTwoNum(date0.getHours())+getTwoNum(date0.getMinutes())+getTwoNum(date0.getSeconds());
                    var arr0=temp0.split("");
                    for(var i=0;i<arr0.length;i++){
                        qh(oImg0[i*2],arr0[i]);
                    }
                },1000);
            }
            function qh(obj,attr){
                if(parseInt(obj.index)!=parseInt(attr)){
                    var parent=obj.parentNode;
                    parent.children[1].src="img/date/"+attr+".jpg"
                    move(obj,"top",20,-172);
                    move(parent.children[1],"top",20,0,function(){
                        parent.removeChild(obj);
                        parent.innerHTML+="<img />";
                        parent.children[0].index=attr;
                    })
                }
            }
            function getTwoNum(n){
                var num=parseInt(n);
                return num<10?"0"+num:""+num;
            }
            function move(obj,arrt,step,destination,fun){
                clearInterval(obj.timer);
                step=destination>parseInt(getStyle(obj,arrt))?step:-step;
                obj.timer=setInterval(function(){
                    var dqwz=parseInt(getStyle(obj,arrt))+step;
                    if(dqwz>destination&&step>0 || dqwz<destination&&step<0 ){
                        clearInterval(obj.timer);
                        dqwz=destination;

                        if(fun){
                            fun();
                        }
                    }
                    obj.style[arrt]=dqwz+"px";
                },50)
            }
            function getStyle(obj,attr){
                return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            }
        }
    </script>
</head>
<body>
<ul id="list">
    <li>
        <img />
        <img />
    </li>
    <li>
        <img />
        <img />
    </li>
    <li>:</li>
    <li>
        <img />
        <img />
    </li>
    <li>
        <img />
        <img />
    </li>
    <li>:</li>
    <li>
        <img />
        <img />
    </li>
    <li>
        <img />
        <img />
    </li>
</ul>

</body>
</html>